import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './index.css';

interface NavigationProps {
  onMenuChange: (name: string) => void;
}

const Navigation: React.FC<NavigationProps> = ({
  onMenuChange
}) => {
  const location = useLocation();
  const handleClick = (name: string) => {
    onMenuChange(name);
  }
  const menuItems = [
    { name: 'layout', label: '布局', path: '/layout/grid' },
    { name: 'button', label: '按钮', path: '/button' },
    { name: 'text', label: '文本', path: '/text' },
    { name: 'image', label: '图片', path: '/image' },
    { name: 'other', label: '其他', path: '/others' }
  ];

  return (
    <nav className="header-navigation">
      <ul className="nav-list">
        {menuItems.map((item, index) => (
          <li key={index} className="nav-item">
            <Link 
              to={item.path} 
              className={`nav-link ${location.pathname === item.path ? 'active' : ''}`}
              onClick={() => handleClick(item.name)}
            >
              {item.label}
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  );
};

export default Navigation;
